<template>
	<view class="wrap">
		<view class="wrap-choose-type">
			<view class="title-bg f-40 flex align-center">安全管理</view>

			<view class="wrap-set-type flex">
				<view class="flex align-center just-center" @click="passwordType = 1">
					<view class="choose">
						<image v-if="passwordType == 1" :src="$staticImagePath('common/choose_select.png')" />
						<image v-else :src="$staticImagePath('common/choose_normal.png')" />
					</view>

					<view class="f-26">免密支付</view>
				</view>

				<view class="flex align-center just-center" @click="passwordType = 0">
					<view class="choose">
						<image v-if="passwordType == 0" :src="$staticImagePath('common/choose_select.png')" />
						<image v-else :src="$staticImagePath('common/choose_normal.png')" />
					</view>

					<view class="f-26">使用密码支付</view>
				</view>
			</view>
		</view>

		<view class="wrap-setting" v-if="passwordType == 0 && pay_password === null">
			<view class="title-bg f-40 flex align-center">设置支付密码</view>

			<view class="setting-white">
				<block v-for="(item, index) in list" :key="index">
					<rowPasswodVue v-if="item.type === 'password'" :item="item" v-model="dataInfo[item.key]" />
				</block>
			</view>
		</view>

		<view class="wrap-manager" v-if="passwordType == 0 && pay_password !== null">
			<view class="item flex align-center just-between" @click="onPwdItem('修改支付密码')">
				<view class="f-26">修改支付密码</view>

				<image class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
			</view>

			<view class="item flex align-center just-between" @click="onPwdItem('忘记支付密码')">
				<view class="f-26">忘记支付密码</view>

				<image class="arrow" :src="$staticImagePath('publish/arrow_right.png')" />
			</view>
		</view>

		<view
			class="sure theme-gradient-btn f-30"
			@click="onSetting"
		>
			确认设置
		</view>
	</view>
</template>

<script>
	import { setPayPassword } from "@/API/mine.js";
	import rowPasswodVue from "@/components/form/rowPasswod.vue";
	export default {
		components: {
			rowPasswodVue,
		},
		data() {
			return {
				passwordType: null, //1:免密 0:非免密  null 未设置
				pay_password: null, //支付密码

				list: [
					{
						title: "设置密码",
						type: "password",
						key: "password",
						place: "请输入6位密码",
						mode: "safe-password",
						maxlength: 6,
						direct: "row",
						tips: "请输入密码",
					},
					{
						title: "确认密码",
						type: "password",
						key: "sure_password",
						place: "请输入确认密码",
						mode: "safe-password",
						maxlength: 6,
						direct: "row",
						tips: "请输入确认密码",
					},
				],
				dataInfo: {
					password: "", //密码
					sure_password: "", //再次确认
				}
			};
		},
		onShow() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.passwordType = res.is_avoid;
				this.pay_password = res.pay_password;
			});
		},
		methods: {
			/**
			 * 修改/忘记支付密码
			 */
			onPwdItem(title) {
				this.$jump.to(`/pages/mine/setting/changePayPassword?title=${title}`);
			},
			/**
			 * 设置
			 */
			onSetting() {
				var pwd = "";
				if (this.passwordType == 0 && (this.pay_password === "" || this.pay_password === null)) {
					if (this.dataInfo.password === "") {
						this.$st.show("请输入支付密码");
						return;
					}
					if (this.dataInfo.sure_password === "") {
						this.$st.show("请再次输入支付密码");
						return;
					}
					if (this.dataInfo.sure_password !== this.dataInfo.password) {
						this.$st.show("两次输入的密码不一致");
						return;
					}
					pwd = this.dataInfo.password;
				}
				
				this.$throttle(() => {
					setPayPassword(this.passwordType, pwd).then((res) => {
						this.$st.success("设置成功", () => {
							uni.navigateBack();
						});
					})
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		.title-bg {
			width: 100%;
			height: 120rpx;
			overflow: hidden;
			background-color: #f6f6f6;
			padding: 0 40rpx;
			box-sizing: border-box;
			color: #000000;
		}
		.wrap-choose-type {
			width: 100%;
			overflow: hidden;

			.wrap-set-type {
				width: 100%;
				overflow: hidden;
				background-color: white;
				height: 100rpx;
				padding: 0 40rpx;
				box-sizing: border-box;

				> view {
					flex: 1;
					height: 100%;
					overflow: hidden;
					gap: 20rpx;

					.choose {
						width: 30rpx;
						height: 30rpx;
						overflow: hidden;
						color: #666666;

						> image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.wrap-setting {
			width: 100%;
			overflow: hidden;

			.setting-white {
				width: 100%;
				overflow: hidden;
				background-color: white;
				padding: 0 40rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					// height: 100rpx;
					border-bottom: 2rpx solid #eeeeee;
					padding: 0 40rpx;
					box-sizing: border-box;
					gap: 20rpx;
					color: #333;

					.input {
						flex: 1;
						overflow: hidden;
					}
					/deep/ .place {
						color: #bbbbbb;
					}
				}
			}
		}

		.wrap-manager {
			margin-top: 50rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;

			.item {
				width: 100%;
				height: 100rpx;
				border-bottom: 2rpx solid #eeeeee;
				padding: 0 40rpx;
				box-sizing: border-box;
				color: #333;

				.arrow {
					width: 14rpx;
					height: 24rpx;
				}
			}
		}

		.sure {
			margin: 50rpx auto;
		}
	}
</style>
